@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }

  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: $purple-dark;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.4) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0.4) 75%,
      transparent 75%,
      transparent
    );
  }
}

@mixin pc-layout {
  @media screen and (min-width: 768px) {
    @content;
  }
}

@mixin sp-layout {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin cursor {
  cursor: url('../assets/cursor/cursor.png'), auto !important;
}

@mixin cursor-link {
  cursor: url('../assets/cursor/cursor_link.png'), auto !important;
}

@mixin clip {
  color: white;
  text-transform: capitalize;
  background-image: linear-gradient(to right, $text-clip-start 10%, $text-clip-center 40%, $text-clip-end 70%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  animation: textclip 3s linear infinite;
}

@mixin card {
  border-radius: 3px;
  background-color: $bg-white-deep;
  @include pc-layout {
    box-shadow: $card-shadow-base;
  }
  @include sp-layout {
    box-shadow: $card-shadow-light;
  }
}

@mixin card-lignt {
  border-radius: 3px;
  background-color: $bg-white-dim;
  box-shadow: $card-shadow-light;
  transition: $transition-base;
  @include pc-layout {
    &:hover {
      transform: translateY(-4px);
      box-shadow: $card-shadow-light-hover;
    }
  }
}

@mixin card-page {
  border-radius: 3px;
  @include pc-layout {
    background-color: $bg-white-dim;
    box-shadow: $card-shadow-base;
  }
}
